<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="app">
    <parent></parent>
</div>
</body>

</html>

<!-- 组件的模板(组件的结构) -->
<template id="parent">
    <!-- vue2中,一个组件的结构只能有一个根节点 -->
    <fieldset>
        <legend>父组件</legend>
        <h1>{{msg}}</h1>
        <child></child>
    </fieldset>
</template>

<!-- <script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script> -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>

    //全局注册组件
    //参数1:组件的名字
    //参数2:组件的选项,像vue的根实例一样,可以有data methods directives filters....

    //组件的编写流程

    //1.注册组件Vue.component()进行注册

    //2.编写组件的模板(组件结构)

    //3.展示组件

    // Vue.component('parent', {
    //     // 组件选项的data必须是一个函数,原因是这样写的话能够让每个组件维护一份data的独立的拷贝
    //     // 避免组件之间的数据混乱,被污染,每个组件的data都是一个独立的作用域
    //     data() {
    //         return {
    //             msg: "sweet heart"
    //         }
    //     },
    //     template: "#parent"
    // })

    // //局部注册组件
    // let vm = new Vue({
    //     el: "#app",
    //     data: {
    //         msg: 'honey'
    //     }
    // })
</script>

<script>
    let app = Vue.createApp({
        data() {
            return {
                msg: '吸氧羊'
            }
        },
    })

    //全局注册组件

    app.component('parent', {
        // 组件选项的data必须是一个函数,原因是这样写的话能够让每个组件维护一份data的独立的拷贝
        // 避免组件之间的数据混乱,被污染,每个组件的data都是一个独立的作用域
        data() {
            return {
                msg: "sweet heart"
            }
        },
        template: "#parent",
        components: {
            'child': {
                data() {
                    return {
                        msg: '子组件'
                    }
                },
                template: "<h1>{{msg}}</h1>"
            }
        }
    })

    app.mount('#app')
</script>